<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智能学习引擎 - 渐进学习平台</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    :root {
      --primary-color: #667eea;
      --secondary-color: #764ba2;
      --success-color: #4CAF50;
      --info-color: #2196F3;
      --warning-color: #FF9800;
      --danger-color: #f44336;
    }

    body {
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
      color: #333;
      min-height: 100vh;
      padding: 0;
    }

    .app-container {
      max-width: 100%;
      margin: 0 auto;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* 导航栏 - 紧凑设计 */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(255, 255, 255, 0.98);
      padding: 12px 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .nav-brand {
      font-size: 20px;
      font-weight: bold;
      color: var(--secondary-color);
      display: flex;
      align-items: center;
    }

    .nav-buttons {
      display: flex;
      gap: 10px;
    }

    .btn {
      padding: 8px 16px;
      border-radius: 6px;
      text-decoration: none;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.3s;
      display: inline-flex;
      align-items: center;
    }

    .btn-outline {
      border: 2px solid var(--secondary-color);
      color: var(--secondary-color);
      background: transparent;
    }

    .btn-outline:hover {
      background: var(--secondary-color);
      color: white;
    }

    /* 主内容区域 - 充分利用宽度 */
    .main-content {
      flex: 1;
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
    }

    /* 学习卡片 */
    .learning-card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      margin-bottom: 20px;
    }

    .card-header {
      padding: 20px;
      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
      border-bottom: 1px solid #dee2e6;
    }

    .card-title {
      font-size: 24px;
      color: #333;
      margin-bottom: 8px;
    }

    .card-subtitle {
      color: #666;
      font-size: 14px;
      line-height: 1.5;
    }

    .card-body {
      padding: 25px;
    }

    /* 智能路径指示器 */
    .path-indicator {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 25px;
      padding: 15px;
      background: #f8f9fa;
      border-radius: 10px;
      border-left: 4px solid var(--info-color);
    }

    .path-info h3 {
      color: #333;
      margin-bottom: 5px;
      font-size: 18px;
    }

    .path-info p {
      color: #666;
      font-size: 14px;
      margin: 0;
    }

    .path-tag {
      background: var(--info-color);
      color: white;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: bold;
    }

    /* 阶段容器 */
    .stages-container {
      display: grid;
      gap: 20px;
      margin-bottom: 25px;
    }

    .stage-card {
      background: white;
      border: 2px solid #e9ecef;
      border-radius: 10px;
      padding: 20px;
      transition: all 0.3s;
      cursor: pointer;
      position: relative;
    }

    .stage-card.current {
      border-color: var(--info-color);
      background: #f0f8ff;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(33, 150, 243, 0.15);
    }

    .stage-card.completed {
      border-color: var(--success-color);
      background: #f8fff8;
    }

    .stage-card.locked {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .stage-header {
      display: flex;
      align-items: center;
      justify-content:  space-between;
      margin-bottom: 15px;
    }

    .stage-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      font-size: 18px;
      flex-shrink: 0;
    }

    .stage-card.current .stage-icon {
      background: var(--info-color);
      color: white;
    }

    .stage-card.completed .stage-icon {
      background: var(--success-color);
      color: white;
    }

    .stage-card.locked .stage-icon {
      background: #6c757d;
      color: white;
    }

    .stage-info {
      flex: 1;
    }

    .stage-name {
      font-weight: 600;
      color: #333;
      margin-bottom: 4px;
    }

    .stage-desc {
      font-size: 13px;
      color: #666;
      line-height: 1.4;
    }

    .stage-status {
      text-align: right;
      font-size: 12px;
      color: #666;
    }

    .stage-duration {
      display: block;
      margin-bottom: 4px;
    }

    /* 学习内容区域 */
    .learning-content {
      min-height: 300px;
      background: white;
      border-radius: 10px;
      padding: 25px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    /* 概念理解样式 */
    .concept-content {
      line-height: 1.7;
    }

    .concept-analogy {
      background: #fff3cd;
      border-left: 4px solid #ffc107;
      padding: 15px;
      margin: 20px 0;
      border-radius: 0 8px 8px 0;
    }

    .concept-visual {
      background: #e7f3ff;
      padding: 20px;
      border-radius: 8px;
      margin: 20px 0;
      text-align: center;
    }

    .visual-diagram {
      font-family: 'Courier New', monospace;
      background: white;
      padding: 15px;
      border-radius: 6px;
      margin: 15px 0;
      border: 1px solid #dee2e6;
    }

    /* 代码练习 - 响应式设计 */
    .code-exercise {
      margin: 20px 0;
    }

    .code-prompt {
      background: #f8f9fa;
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 20px;
      border-left: 4px solid var(--info-color);
    }

    /* 桌面端代码编辑器 */
    .desktop-code-editor {
      display: none;
    }

    /* 移动端代码构建器 */
    .mobile-code-builder {
      display: none;
    }

    .code-blocks {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 15px 0;
    }

    .code-block {
      background: white;
      border: 2px solid #e9ecef;
      padding: 12px 15px;
      border-radius: 8px;
      cursor: grab;
      font-family: 'Courier New', monospace;
      font-size: 14px;
      transition: all 0.2s;
      user-select: none;
    }

    .code-block:hover {
      border-color: var(--info-color);
      transform: translateY(-2px);
    }

    .code-workspace {
      background: #2d2d2d;
      color: #f8f8f2;
      padding: 20px;
      border-radius: 8px;
      min-height: 200px;
      font-family: 'Courier New', monospace;
      margin: 15px 0;
      position: relative;
    }

    .code-line {
      margin-bottom: 8px;
      display: flex;
      align-items: center;
    }

    .line-number {
      color: #6a9955;
      margin-right: 15px;
      min-width: 20px;
    }

    .code-slot {
      display: inline-block;
      min-width: 100px;
      height: 24px;
      border-bottom: 2px dashed #4CAF50;
      margin: 0 5px;
      vertical-align: middle;
    }

    .code-slot.filled {
      border-bottom: none;
      background: #4CAF50;
      color: white;
      padding: 2px 8px;
      border-radius: 4px;
    }

    /* 控制按钮 */
    .action-buttons {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid #e9ecef;
    }

    .action-btn {
      padding: 12px 25px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-prev {
      background: #6c757d;
      color: white;
    }

    .btn-next {
      background: var(--success-color);
      color: white;
    }

    .btn-prev:disabled {
      background: #ccc;
      cursor: not-allowed;
    }

    /* 移动端优化 */
    @media (max-width: 768px) {
      .main-content {
        padding: 15px;
      }

      .navbar {
        padding: 10px 15px;
      }

      .nav-buttons {
        flex-direction: column;
        gap: 8px;
      }

      .btn {
        padding: 6px 12px;
        font-size: 12px;
      }

      .card-body {
        padding: 20px 15px;
      }

      .path-indicator {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }

      .path-tag {
        align-self: flex-start;
      }

      .stage-header {
        flex-direction: column;
        align-items: flex-start;
      }

      .stage-icon {
        margin-right: 0;
        margin-bottom: 10px;
      }

      .stage-status {
        align-self: flex-start;
        margin-top: 10px;
      }

      .action-buttons {
        flex-direction: column;
        gap: 10px;
      }

      .action-btn {
        width: 100%;
        justify-content: center;
      }

      /* 移动端显示代码构建器 */
      .mobile-code-builder {
        display: block;
      }
    }

    /* 桌面端优化 */
    @media (min-width: 769px) {
      .desktop-code-editor {
        display: block;
      }

      .stages-container {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      }

      .main-content {
        padding: 30px;
      }
    }

    /* 大屏幕优化 */
    @media (min-width: 1200px) {
      .main-content {
        padding: 40px;
      }
    }
  </style>
</head>
<body>
<div class="app-container">
  <!-- 导航栏 -->
  <nav class="navbar">
    <div class="nav-brand">
      <span style="margin-right: 8px;">🚀</span> 渐进学习平台
    </div>
    <div class="nav-buttons">
      <a href="/knowledge-gym" class="btn btn-outline">返回训练馆</a>
      <a href="/" class="btn btn-outline">返回首页</a>
    </div>
  </nav>

  <!-- 主内容区域 -->
  <div class="main-content">
    <!-- 学习卡片 -->
    <div class="learning-card">
      <div class="card-header">
        <h1 class="card-title" id="contentTitle">Spring IoC容器</h1>
        <p class="card-subtitle" id="contentDescription">
          理解控制反转和依赖注入的核心概念，掌握Spring容器的运作原理
        </p>
      </div>

      <div class="card-body">
        <!-- 智能路径指示器 -->
        <div class="path-indicator">
          <div class="path-info">
            <h3>🎯 智能学习路径</h3>
            <p>系统已为你推荐最适合这个知识点的学习阶段</p>
          </div>
          <div class="path-tag" id="pathTypeTag">概念理解型</div>
        </div>

        <!-- 阶段容器 -->
        <div class="stages-container" id="stagesContainer">
          <!-- 阶段会通过JavaScript动态生成 -->
        </div>

        <!-- 学习内容区域 -->
        <div class="learning-content" id="learningContent">
          <div class="loading-state">
            <div style="text-align: center; padding: 40px; color: #666;">
              <div style="font-size: 48px; margin-bottom: 20px;">📚</div>
              <p>选择学习阶段开始</p>
            </div>
          </div>
        </div>

        <!-- 控制按钮 -->
        <div class="action-buttons">
          <button class="action-btn btn-prev" onclick="previousStage()" disabled id="prevBtn">
            ← 上一阶段
          </button>
          <button class="action-btn btn-next" onclick="nextStage()" id="nextBtn">
            下一阶段 →
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // 知识点类型和学习路径配置
  const knowledgeConfigs = {
    // 概念理解型知识点（如IoC、设计模式等）
    conceptual: {
      name: "概念理解型",
      stages: [
        {
          id: 1,
          type: "concept",
          name: "核心概念解析",
          icon: "💡",
          description: "通过类比和生活化语言理解抽象概念",
          duration: "8-12分钟",
          required: true
        },
        {
          id: 2,
          type: "analogy",
          name: "生活化类比",
          icon: "🔍",
          description: "用熟悉的场景理解复杂概念",
          duration: "6-10分钟",
          required: true
        },
        {
          id: 3,
          type: "quiz",
          name: "理解检验",
          icon: "🎯",
          description: "快速问答检验概念掌握程度",
          duration: "5-8分钟",
          required: true
        }
      ]
    },

    // API学习型知识点（如集合类、工具类等）
    api: {
      name: "API学习型",
      stages: [
        {
          id: 1,
          type: "overview",
          name: "API概览",
          icon: "📋",
          description: "了解API的功能和用途",
          duration: "5-8分钟",
          required: true
        },
        {
          id: 2,
          type: "usage",
          name: "使用示例",
          icon: "🔧",
          description: "查看实际使用场景和示例",
          duration: "10-15分钟",
          required: true
        },
        {
          id: 3,
          type: "practice",
          name: "动手练习",
          icon: "💻",
          description: "在代码中实际应用API",
          duration: "12-18分钟",
          required: false
        },
        {
          id: 4,
          type: "quiz",
          name: "应用测验",
          icon: "🎯",
          description: "检验API掌握程度",
          duration: "6-10分钟",
          required: true
        }
      ]
    },

    // 代码实践型知识点（如算法、业务逻辑等）
    coding: {
      name: "代码实践型",
      stages: [
        {
          id: 1,
          type: "concept",
          name: "思路理解",
          icon: "🧠",
          description: "理解算法思路和实现逻辑",
          duration: "8-12分钟",
          required: true
        },
        {
          id: 2,
          type: "visualization",
          name: "过程可视化",
          icon: "📊",
          description: "通过动画理解执行过程",
          duration: "10-15分钟",
          required: true
        },
        {
          id: 3,
          type: "coding",
          name: "代码实现",
          icon: "💻",
          description: "动手编写和调试代码",
          duration: "15-25分钟",
          required: true
        },
        {
          id: 4,
          type: "optimization",
          name: "优化练习",
          icon: "⚡",
          description: "改进和优化代码实现",
          duration: "10-15分钟",
          required: false
        }
      ]
    }
  };

  // 当前学习状态
  let currentState = {
    knowledgeType: "conceptual", // 默认概念型
    currentStage: 0, // 0表示未开始
    completedStages: [],
    currentContent: {
      title: "Spring IoC容器",
      description: "理解控制反转和依赖注入的核心概念，掌握Spring容器的运作原理",
      type: "conceptual"
    }
  };

  // 设备检测
  const isMobile = window.innerWidth <= 768;

  // 初始化页面
  document.addEventListener('DOMContentLoaded', function() {
    detectKnowledgeType();
    renderLearningPath();
    updateContentDisplay();
  });

  // 检测知识点类型（实际项目中从后端获取）
  function detectKnowledgeType() {
    // 这里可以根据知识点的标题、描述等内容智能判断类型
    // 暂时使用预设值
    currentState.knowledgeType = currentContent.type;
    document.getElementById('pathTypeTag').textContent =
            knowledgeConfigs[currentState.knowledgeType].name;
  }

  // 渲染学习路径
  function renderLearningPath() {
    const container = document.getElementById('stagesContainer');
    const pathConfig = knowledgeConfigs[currentState.knowledgeType];

    container.innerHTML = '';

    pathConfig.stages.forEach((stage, index) => {
      const stageElement = createStageElement(stage, index);
      container.appendChild(stageElement);
    });
  }

  // 创建阶段元素
  function createStageElement(stage, index) {
    const stageDiv = document.createElement('div');
    let stageClass = 'stage-card';

    if (index < currentState.currentStage) {
      stageClass += ' completed';
    } else if (index === currentState.currentStage) {
      stageClass += ' current';
    } else if (index > currentState.currentStage) {
      stageClass += ' locked';
    }

    stageDiv.className = stageClass;
    stageDiv.onclick = () => selectStage(index);

    stageDiv.innerHTML = `
                <div class="stage-header">
                    <div class="stage-icon">${stage.icon}</div>
                    <div class="stage-info">
                        <div class="stage-name">${stage.name}</div>
                        <div class="stage-desc">${stage.description}</div>
                    </div>
                    <div class="stage-status">
                        <span class="stage-duration">${stage.duration}</span>
                        ${stage.required ? '<span style="color:#666;">必修</span>' : '<span style="color:#999;">选修</span>'}
                    </div>
                </div>
            `;

    return stageDiv;
  }

  // 选择阶段
  function selectStage(stageIndex) {
    const pathConfig = knowledgeConfigs[currentState.knowledgeType];

    // 只能选择当前阶段或已完成的阶段
    if (stageIndex > currentState.currentStage) {
      return;
    }

    currentState.currentStage = stageIndex;
    renderLearningPath();
    loadStageContent(pathConfig.stages[stageIndex]);
    updateNavigationButtons();
  }

  // 加载阶段内容
  function loadStageContent(stage) {
    const contentArea = document.getElementById('learningContent');

    switch (stage.type) {
      case 'concept':
        contentArea.innerHTML = renderConceptContent();
        break;
      case 'analogy':
        contentArea.innerHTML = renderAnalogyContent();
        break;
      case 'coding':
        contentArea.innerHTML = isMobile ? renderMobileCodingContent() : renderDesktopCodingContent();
        break;
      case 'quiz':
        contentArea.innerHTML = renderQuizContent();
        break;
      default:
        contentArea.innerHTML = renderDefaultContent(stage);
    }
  }

  // 渲染概念理解内容
  function renderConceptContent() {
    return `
                <div class="concept-content">
                    <h3>💡 Spring IoC 核心概念</h3>

                    <div class="concept-analogy">
                        <h4>🤔 传统方式 vs IoC方式</h4>
                        <p><strong>传统方式（自己控制）：</strong>就像你自己去菜市场买菜、洗菜、炒菜</p>
                        <p><strong>IoC方式（别人控制）：</strong>就像去餐厅点菜，厨师和服务员帮你准备好一切</p>
                    </div>

                    <p><strong>控制反转（Inversion of Control）</strong>就是把创建和管理对象的控制权从应用程序代码转移到容器（Spring框架）。</p>

                    <div class="concept-visual">
                        <h4>🔄 IoC 工作流程</h4>
                        <div class="visual-diagram">
                            你的代码 → 告诉Spring需要什么 → Spring容器创建并注入 → 直接使用
                        </div>
                        <p>你不再需要 <code>new Object()</code>，而是告诉Spring："我需要这个对象"</p>
                    </div>

                    <div style="margin-top: 20px;">
                        <h4>🎯 关键理解点：</h4>
                        <ul style="line-height: 1.8;">
                            <li><strong>谁控制谁：</strong>容器控制对象，而不是对象控制容器</li>
                            <li><strong>控制什么：</strong>控制对象的生命周期和依赖关系</li>
                            <li><strong>为何反转：</strong>从主动创建变为被动接收</li>
                            <li><strong>反转什么：</strong>反转了获取依赖对象的方式</li>
                        </ul>
                    </div>
                </div>
            `;
  }

  // 渲染生活化类比内容
  function renderAnalogyContent() {
    return `
                <div class="concept-content">
                    <h3>🔍 IoC 生活化类比</h3>

                    <div style="display: grid; gap: 20px; margin-top: 20px;">
                        <div style="background: #e7f3ff; padding: 20px; border-radius: 10px;">
                            <h4>🏗️ 建筑工地类比</h4>
                            <p><strong>没有IoC：</strong>你自己去买砖头、水泥、找工人，全程自己协调</p>
                            <p><strong>使用IoC：</strong>你告诉项目经理需求，他安排所有材料和工人</p>
                            <p style="margin-top: 10px; font-style: italic;">Spring就是那个项目经理，帮你管理所有"对象工人"</p>
                        </div>

                        <div style="background: #f0f8ff; padding: 20px; border-radius: 10px;">
                            <h4>🎬 电影拍摄类比</h4>
                            <p><strong>没有IoC：</strong>演员自己找化妆师、准备道具、搭建场景</p>
                            <p><strong>使用IoC：</strong>导演安排好一切，演员只需要专注表演</p>
                            <p style="margin-top: 10px; font-style: italic;">Spring就是导演，演员（你的代码）只需要专注业务逻辑</p>
                        </div>

                        <div style="background: #f8fff0; padding: 20px; border-radius: 10px;">
                            <h4>🏥 医院看病类比</h4>
                            <p><strong>没有IoC：</strong>病人自己找医生、拿药、做检查</p>
                            <p><strong>使用IoC：</strong>挂号后，医院安排所有流程</p>
                            <p style="margin-top: 10px; font-style: italic;">Spring就是医院系统，你（病人）只需要说明需求</p>
                        </div>
                    </div>
                </div>
            `;
  }

  // 渲染桌面端代码练习
  function renderDesktopCodingContent() {
    return `
                <div class="code-exercise">
                    <h3>💻 代码实践：实现简单的IoC容器</h3>

                    <div class="code-prompt">
                        <p><strong>任务：</strong>完成以下简单IoC容器的实现，理解容器如何管理对象</p>
                    </div>

                    <div class="desktop-code-editor">
                        <div style="background: #2d2d2d; color: #f8f8f2; padding: 20px; border-radius: 8px; font-family: 'Courier New', monospace;">
                            <div class="code-line"><span style="color: #569cd6;">public class</span> <span style="color: #4ec9b0;">SimpleContainer</span> {</div>
                            <div class="code-line">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">private</span> Map&lt;String, Object&gt; beans = <span style="color: #569cd6;">new</span> HashMap&lt;&gt;();</div>
                            <div class="code-line">&nbsp;&nbsp;&nbsp;&nbsp;</div>
                            <div class="code-line">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">public</span> <span style="color: #4ec9b0;">void</span> <span style="color: #dcdcaa;">registerBean</span>(String name, Object bean) {</div>
                            <div class="code-line">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<textarea placeholder="// 在这里实现注册逻辑" style="width: 100%; background: #1e1e1e; color: #f8f8f2; border: 1px solid #444; padding: 8px; border-radius: 4px; min-height: 80px; font-family: 'Courier New', monospace;"></textarea></div>
                            <div class="code-line">&nbsp;&nbsp;&nbsp;&nbsp;}</div>
                            <div class="code-line">&nbsp;&nbsp;&nbsp;&nbsp;</div>
                            <div class="code-line">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">public</span> Object <span style="color: #dcdcaa;">getBean</span>(String name) {</div>
                            <div class="code-line">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<textarea placeholder="// 在这里实现获取逻辑" style="width: 100%; background: #1e1e1e; color: #f8f8f2; border: 1px solid #444; padding: 8px; border-radius: 4px; min-height: 80px; font-family: 'Courier New', monospace;"></textarea></div>
                            <div class="code-line">&nbsp;&nbsp;&nbsp;&nbsp;}</div>
                            <div class="code-line">}</div>
                        </div>
                    </div>

                    <div style="margin-top: 20px;">
                        <button class="action-btn btn-next" onclick="runCode()" style="background: var(--info-color);">
                            🔧 运行测试
                        </button>
                    </div>
                </div>
            `;
  }

  // 渲染移动端代码构建器
  function renderMobileCodingContent() {
    return `
                <div class="code-exercise">
                    <h3>📱 代码构建：理解IoC容器实现</h3>

                    <div class="code-prompt">
                        <p><strong>任务：</strong>通过拖拽代码块完成简单IoC容器的实现</p>
                    </div>

                    <div class="mobile-code-builder">
                        <h4>可用代码块：</h4>
                        <div class="code-blocks">
                            <div class="code-block" draggable="true" data-code="beans.put(name, bean)">beans.put(name, bean)</div>
                            <div class="code-block" draggable="true" data-code="return beans.get(name)">return beans.get(name)</div>
                            <div class="code-block" draggable="true" data-code="if (beans.containsKey(name))">if (beans.containsKey(name))</div>
                            <div class="code-block" draggable="true" data-code="throw new RuntimeException(&quot;Bean not found: &quot; + name)">throw new RuntimeException(...)</div>
                        </div>

                        <h4 style="margin-top: 20px;">代码工作区：</h4>
                        <div class="code-workspace">
                            <div class="code-line">
                                <span class="line-number">1</span>
                                <span>public void registerBean(String name, Object bean) {</span>
                            </div>
                            <div class="code-line">
                                <span class="line-number">2</span>
                                <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                <div class="code-slot" id="slot1" ondrop="dropCode(event)" ondragover="allowDrop(event)"></div>
                            </div>
                            <div class="code-line">
                                <span class="line-number">3</span>
                                <span>}</span>
                            </div>
                            <div class="code-line">
                                <span class="line-number">4</span>
                                <span></span>
                            </div>
                            <div class="code-line">
                                <span class="line-number">5</span>
                                <span>public Object getBean(String name) {</span>
                            </div>
                            <div class="code-line">
                                <span class="line-number">6</span>
                                <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                <div class="code-slot" id="slot2" ondrop="dropCode(event)" ondragover="allowDrop(event)"></div>
                            </div>
                            <div class="code-line">
                                <span class="line-number">7</span>
                                <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                <div class="code-slot" id="slot3" ondrop="dropCode(event)" ondragover="allowDrop(event)"></div>
                            </div>
                            <div class="code-line">
                                <span class="line-number">8</span>
                                <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                <div class="code-slot" id="slot4" ondrop="dropCode(event)" ondragover="allowDrop(event)"></div>
                            </div>
                            <div class="code-line">
                                <span class="line-number">9</span>
                                <span>}</span>
                            </div>
                        </div>
                    </div>

                    <div style="margin-top: 20px;">
                        <button class="action-btn btn-next" onclick="checkMobileCode()" style="background: var(--info-color);">
                            ✅ 检查答案
                        </button>
                    </div>
                </div>
            `;
  }

  // 移动端代码拖拽功能
  function allowDrop(event) {
    event.preventDefault();
  }

  function dropCode(event) {
    event.preventDefault();
    const code = event.dataTransfer.getData("text");
    event.target.textContent = code;
    event.target.className = "code-slot filled";
  }

  // 更新内容显示
  function updateContentDisplay() {
    document.getElementById('contentTitle').textContent = currentState.currentContent.title;
    document.getElementById('contentDescription').textContent = currentState.currentContent.description;
  }

  // 更新导航按钮
  function updateNavigationButtons() {
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const pathConfig = knowledgeConfigs[currentState.knowledgeType];

    prevBtn.disabled = currentState.currentStage === 0;

    if (currentState.currentStage === pathConfig.stages.length - 1) {
      nextBtn.textContent = '完成学习 🎉';
    } else {
      nextBtn.textContent = '下一阶段 →';
    }
  }

  // 上一阶段
  function previousStage() {
    if (currentState.currentStage > 0) {
      currentState.currentStage--;
      renderLearningPath();
      const pathConfig = knowledgeConfigs[currentState.knowledgeType];
      loadStageContent(pathConfig.stages[currentState.currentStage]);
      updateNavigationButtons();
    }
  }

  // 下一阶段
  function nextStage() {
    const pathConfig = knowledgeConfigs[currentState.knowledgeType];

    if (currentState.currentStage < pathConfig.stages.length - 1) {
      currentState.currentStage++;
      renderLearningPath();
      loadStageContent(pathConfig.stages[currentState.currentStage]);
      updateNavigationButtons();
    } else {
      // 完成所有阶段
      completeLearning();
    }
  }

  // 完成学习
  function completeLearning() {
    alert('恭喜完成学习！');
    // 实际项目中这里会跳转或显示完成页面
  }

  // 初始化代码块拖拽
  document.addEventListener('DOMContentLoaded', function() {
    const codeBlocks = document.querySelectorAll('.code-block');
    codeBlocks.forEach(block => {
      block.addEventListener('dragstart', function(event) {
        event.dataTransfer.setData("text", event.target.getAttribute('data-code'));
      });
    });
  });
</script>
</body>
</html>